<nz-layout>
  <nz-content style="background: #fff">
    <!-- 操作条 -->
    <div class="nav-bar-virtual">
      <ul>
        <li>
          <a (click)="goBack()">
            < 返回 </a>
        </li>
        <li>
          <a *ngIf="subjectId" [href]="httpService.IP_PORT+'?subjectid='+subjectId+'&typeinfo=2'" target="_blank">
            教学指导
          </a>
        </li>
      </ul>
    </div>
    <!-- 演练完成提示 -->
    <div style="min-height: auto; margin-bottom: 10px;" class="steps-content" *ngIf="flowRecordOutput && flowRecordOutput.drillStatus && flowRecordOutput.drillStatus==2">
      <div style="margin: auto">
        <h1 style="color:red;font-size: 22px">{{flowRecordOutput.notValid?'操作错误，演练已经结束':'演练已经完成'}}</h1>
        <h2 style="color:red;font-size: 20px" *ngIf="flowRecordOutput.notValid">{{flowRecordOutput.errorMessage}}</h2>
      </div>
    </div>
    <div nz-row style="min-width:1200px" *ngIf="flowRecordOutput">
      <div nz-col [nzSpan]="12">
        <div nz-row>
          <div nz-col [nzSpan]="2">
            <p class="lefttitle">{{flowRecordOutput.caption}}</p>
          </div>
          <div nz-col [nzSpan]="22">
            <h3 style="margin:25px 0 15px 0;text-align: center;font-size: 18px">流程图</h3>
            <ng-container *ngFor="let item of reslutList.flows; let i=index">
              <div class="drag_box" [style.background]="item.backgroundColor">
                <h4>{{item.flowName}}</h4>
                <div id="item.id" (drop)="drop($event, item)" (dragover)="allowDrop($event)">
                  <span *ngIf=" !item.dragFlowForms || item.dragFlowForms.length==0" style="display:inline-block; height: 60px;line-height: 60px ;color:#aaa">请拖拽右侧内容至此</span>
                  <ng-container *ngIf=" item.dragFlowForms && item.dragFlowForms.length>0">
                    <p *ngFor="let p of item.dragFlowForms" (dblclick)="delElement(item.id,p)" 
                    [title]="getErrorTitle(item.id,p)" [style.color]="isError(item.id,p)?'white':'black'">{{p.fieldCaption}}</p>
                  </ng-container>
                </div>
              </div>
              <i *ngIf="(reslutList.flows.length-1)!==i" class="anticon anticon-arrow-down" style="font-size: 26px;font-weight: bold;display: block;margin: 10px auto;"></i>
            </ng-container>
          </div>
        </div>
      </div>
      <div nz-col [nzSpan]="12">
        <div nz-row>
          <div nz-col [nzSpan]="2">
            <p class="lefttitle">{{flowRecordOutput.desc}}</p>
          </div>
          <div nz-col [nzSpan]="22">
            <p class="righttoptitle">请点击下面的名称，按住鼠标左键，将你认为最合适的名称分别放置到左侧各个层级的虚线框中</p>
            <div class="drag_box" style="background: #f2f2f2;margin-right: 20px;">
              <h4>{{flowRecordOutput.desc}}</h4>
              <p [id]="item.id" draggable="true" (dragstart)="dragStart($event,item)" *ngFor="let item of reslutList.forms; let i=index">{{item.fieldCaption}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button nz-button style="background:#c00;color:#fff;display: block;margin:0 auto;margin-top: 30px;border-color:#c00;width:120px"
      (click)="saveResult()" *ngIf="flowRecordOutput && flowRecordOutput.drillStatus!=2">提交</button>
  </nz-content>
</nz-layout>
